<script lang="ts" setup>
import { computed } from 'vue'
import LoginForm from './LoginForm.vue'
import ForgetPasswordForm from './ForgetPasswordForm.vue'
import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application'
import { useGlobSetting } from '@/hooks/setting'
import { useI18n } from '@/hooks/web/useI18n'
import { useDesign } from '@/hooks/web/useDesign'
import { useLocaleStore } from '@/store/modules/locale'

defineProps({
  sessionTimeout: {
    type: Boolean,
  },
})

const globSetting = useGlobSetting()
const { prefixCls } = useDesign('login')
const { t } = useI18n()
const localeStore = useLocaleStore()
const showLocale = localeStore.getShowPicker
const title = computed(() => globSetting?.title ?? '')
</script>

<template>
  <div :class="prefixCls" class="relative overflow-hidden">
    <div class="absolute right-4 top-4 flex items-center">
      <AppDarkModeToggle v-if="!sessionTimeout" class="enter-x mr-2" />
      <AppLocalePicker v-if="!sessionTimeout && showLocale" class="enter-x" :show-text="false" />
    </div>

    <span class="-enter-x xl:hidden">
      <AppLogo :always-show-title="true" />
    </span>

    <div class="login-wrap">
      <div class="login-form">
        <div :class="`${prefixCls}-form`" style='margin:0 auto' class="enter-x relative ">
          <LoginForm />
          <ForgetPasswordForm />
        </div>
      </div>
      <div class="login-bg animate__animated  animate__bounceInRight">
      </div>
    </div>
  </div>
</template>

<style lang="less">
.login-wrap {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-form {
    padding-top: 51px;
    box-sizing: border-box;
    width: 380px;
    margin-right: 180px;
  }

  .login-bg {
    background: url("../../../assets/images/login/login-bg.png") no-repeat center center / cover;
    width: 761px;
    height: 657px;
  }
}
</style>
